<template>
  <div>
    <el-col :span="8">-</el-col>
    <el-col :span="8">
      <el-steps class="deployBox"  :active="active">
        <el-step title="合同信息"></el-step>
        <el-step title="附件"></el-step>
        <el-step title="付款单"></el-step>
      </el-steps>
    </el-col>
    <el-col :span="8" align="right">-</el-col><br><br><br>
    <div v-if="active===1">
      <div>
        <br>
        <span>房产信息                                      </span>
        <el-button size="mini" type="primary" @click="select">收房合同查询</el-button>
        <hr><br>
        <el-row :gutter="15">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="107px">
            <el-col :span="12">
              <el-form-item label="小区名称" prop="premiseName">
                <el-input disabled="disabled" v-model="formData.premiseName" placeholder="请输入小区名称" clearable :style="{width: '60%'}"  >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="房产信息" prop="houseName">
                <el-input v-model="formData.houseName" placeholder="请输入房产信息" clearable :style="{width: '60%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所有权类型" prop="houseType">
                <el-select v-model="formData.houseType" placeholder="请选择所有权类型" clearable :style="{width: '60%'}">
                  <el-option v-for="(item, index) in houseTypeOptions" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="房产证书编号" prop="houseId">
                <el-input v-model="formData.houseId" placeholder="请输入房产证书编号" clearable :style="{width: '60%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产权地址" prop="cqAddress">
                <el-input v-model="formData.cqAddress" placeholder="请输入产权地址" clearable :style="{width: '60%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <span>业主信息</span>
      <hr><br>
      <div>
        <el-row :gutter="15">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="107px">
            <el-col :span="12">
              <el-form-item label="业主姓名" prop="ownerName">
                <el-input v-model="formData.ownerName" placeholder="请输入业主姓名业主姓名" clearable
                          :style="{width: '60%'}"></el-input>
                <el-switch v-model="formData.signWithOwner" active-color="#28E731"></el-switch>
                是否为签约人
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业主证件号码" prop="ownerIdCard">
                <el-input v-model="formData.ownerIdCard" placeholder="请输入业主证件号码" clearable
                          :style="{width: '60%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业主手机号" prop="ownerMobile">
                <el-input v-model="formData.ownerMobile" placeholder="请输入单行文本业主手机号" clearable
                          :style="{width: '60%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业主联系地址" prop="ownerContactAddress">
                <el-input v-model="formData.ownerContactAddress" placeholder="请输入业主联系地址" clearable
                          :style="{width: '60%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签约人" prop="signUserName">
                <el-input v-model="formData.signUserName" placeholder="请输入签约人" clearable :style="{width: '60%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签约人证件号" prop="signUserIdCard">
                <el-input v-model="formData.signUserIdCard" placeholder="请输入签约人证件号" clearable
                          :style="{width: '60%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签约人手机号" prop="signUserMobile">
                <el-input v-model="formData.signUserMobile" placeholder="请输入签约人手机号" clearable
                          :style="{width: '60%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="紧急联系电话" prop="signUserEmergencyPhone">
                <el-input v-model="formData.signUserEmergencyPhone" placeholder="请输入紧急联系电话" clearable
                          :style="{width: '60%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账户类型" prop="zhanghuleixing">
                <el-select v-model="formData.accountType" placeholder="请选择账户类型" clearable
                           :style="{width: '60%'}">
                  <el-option v-for="(item, index) in accountTypeOptions" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <span>租约信息</span>
      <hr><br>
      <div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-form-item label="租约期限" prop="leaseStartTime">
            <el-date-picker v-model="formData.leaseStartTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '15%'}" placeholder="开始时间" clearable></el-date-picker>-
            <el-date-picker v-model="formData.leaseEndTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '15%'}" placeholder="结束时间" clearable></el-date-picker>
          </el-form-item>
          <el-form-item label="租金" prop="monthRent">
            <el-input v-model="formData.monthRent" placeholder="请输入租金" clearable :style="{width: '20%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="房产押金" prop="depositMoney">
            <el-input v-model="formData.depositMoney" placeholder="请输入房产押金" clearable :style="{width: '20%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="支付方式" prop="depositType">
            押
            <el-select v-model="formData.depositType" placeholder="1" clearable :style="{width: '5%'}">
              <el-option v-for="(item, index) in depositTypeOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
            付
            <el-select v-model="formData.paymentType" placeholder="1" clearable :style="{width: '5%'}">
              <el-option v-for="(item, index) in depositTypeOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '35%'}"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-dialog
          title="收房列表"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="小区名称">
              <el-select v-model="formData" placeholder="请选择小区" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in abc" :label="item.premiseName"
                           :value="item" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="mini" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <br><br><br>
    <div class="basicInfo" v-if="active===2">
      <span>房产证图片</span><hr><br>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:9201/file/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess1"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span>收房合同</span><hr><br>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:9201/file/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess2"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span>委托书</span><hr><br>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:9201/file/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess3"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span>物业交割单</span><hr><br>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:9201/file/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess4"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl4" :src="imageUrl4" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span>其他</span><hr><br>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:9201/file/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess5"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl5" :src="imageUrl5" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div align="right">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">提交</el-button>
        </span>
      </div>
    </div>
    <br><br><br>
    <div class="basicInfo" v-if="active===3">
      <span>付款单</span><hr><br>
      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="sfContractNo"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="leaseStartTime"
            label="应付日期">
          </el-table-column>
          <el-table-column
            prop="reserve5"
            label="金额">
          </el-table-column>
          <el-table-column
            prop="reserve2"
            label="付款状态">
          </el-table-column>
          <el-table-column
            prop="leaseStartTime"
            label="开始租聘日期">
          </el-table-column>
          <el-table-column
            prop="leaseEndTime"
            label="结束租聘日期">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="deployBox" align="right">
      <el-button type="cyan" size="mini" @click="prev" v-if="active!=1">上一步</el-button>
      <el-button type="cyan" size="mini" @click="next" v-if="active<2">下一步</el-button>
    </div>
  </div>
</template>

<script>
  import { listShoufang,updateShoufang,listFkd } from "@/api/system/shoufang";

  export default {
    components: {},
    props: [],
    data() {
      return {
        tableData: [],
        active: 1,
        dialogVisible: false,
        imageUrl1: '',
        imageUrl2: '',
        imageUrl3: '',
        imageUrl4: '',
        imageUrl5: '',
        formData: {
          premiseName: undefined,
          houseName: undefined,
          houseType: undefined,
          houseId: undefined,
          cqAddress: undefined,
          ownerName: undefined,
          ownerIdCard: undefined,
          ownerMobile: undefined,
          ownerContactAddress: undefined,
          signUserName: undefined,
          signUserIdCard: undefined,
          signUserMobile: undefined,
          signUserEmergencyPhone: undefined,
          zhanghuleixing: undefined,
          leaseStartTime: null,
          leaseEndTime: null,
          monthRent: undefined,
          depositMoney: undefined,
          depositType: undefined,
          paymentType: undefined,
          remark: undefined,
          sfImg1: undefined,
          sfImg2: undefined,
          sfImg3: undefined,
          sfImg4: undefined,
          sfImg5: undefined,
        },
        field101Options: [{
          "label": "选项一",
          "value": 1
        }],
        abc: [],
        rules: {
          premiseName: [{
            required: true,
            message: '请输入小区名称',
            trigger: 'blur'
          }],
          houseName: [{
            required: true,
            message: '请输入房产信息',
            trigger: 'blur'
          }],
          houseType: [{
            required: true,
            message: '请选择所有权类型',
            trigger: 'change'
          }],
          houseId: [{
            required: true,
            message: '请输入房产证书编号',
            trigger: 'blur'
          }],
          cqAddress: [{
            required: true,
            message: '请输入产权地址',
            trigger: 'blur'
          }],
          ownerName: [{
            required: true,
            message: '请输入业主姓名业主姓名',
            trigger: 'blur'
          }],
          ownerIdCard: [{
            required: true,
            message: '请输入业主证件号码',
            trigger: 'blur'
          }],
          ownerMobile: [{
            required: true,
            message: '请输入单行文本业主手机号',
            trigger: 'blur'
          }],
          ownerContactAddress: [{
            required: true,
            message: '请输入业主联系地址',
            trigger: 'blur'
          }],
          signUserName: [{
            required: true,
            message: '请输入签约人',
            trigger: 'blur'
          }],
          signUserIdCard: [{
            required: true,
            message: '请输入签约人证件号',
            trigger: 'blur'
          }],
          signUserMobile: [{
            required: true,
            message: '请输入签约人手机号',
            trigger: 'blur'
          }],
          signUserEmergencyPhone: [{
            required: true,
            message: '请输入紧急联系电话',
            trigger: 'blur'
          }],
          accountType: [{
            required: true,
            message: '请选择账户类型',
            trigger: 'change'
          }],
          leaseStartTime: [{
            required: true,
            message: '开始时间',
            trigger: 'change'
          }],
          leaseEndTime: [{
            required: true,
            message: '结束时间',
            trigger: 'change'
          }],
          monthRent: [{
            required: true,
            message: '请输入租金',
            trigger: 'blur'
          }],
          depositMoney: [{
            required: true,
            message: '请输入房产押金',
            trigger: 'blur'
          }],
          depositType: [{
            required: true,
            message: '1',
            trigger: 'change'
          }],
          paymentType: [{
            required: true,
            message: '1',
            trigger: 'change'
          }],
          remark: [{
            required: true,
            message: '请输入备注',
            trigger: 'blur'
          }],
        },
        houseTypeOptions: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
        accountTypeOptions: [{
          "label": "对公账户",
          "value": 1
        }, {
          "label": "对私账户",
          "value": 2
        }, {
          "label": "其他",
          "value": -1
        }],
        depositTypeOptions: [
          {
            "label": "1",
            "value": "1"
          },{
            "label": "3",
            "value": "3"
          },{
            "label": "6",
            "value": "6"
          },{
            "label": "12",
            "value": "12"
          }
        ],
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getList();
    },
    mounted() {},
    methods: {
      getList() {
        listShoufang(this.addDateRange(this.formData)).then(
          response => {
            this.tableData = response.rows;
          }
        );
      },
      submitForm() {
        updateShoufang(this.formData).then(response => {
          if (response.code === 200) {
            this.msgSuccess("续约成功");
            this.open = false;
            this.active = 3;
          }
          listFkd(this.addDateRange()).then(
            response => {
              this.tableData = response.rows;
            }
          );
        });
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      select(){
        this.dialogVisible = true;
        this.loading = true;
        listShoufang(this.addDateRange(this.formData)).then(
          response => {
            this.abc = response.rows;
          }
        );
      },
      prev(){
        --this.active;
        if(this.active<1){
          this.active=1;
        }
      },
      next(){
        ++this.active;
        if (this.active>3){
          this.active=3;
        }
        this.imageUrl1 = this.formData.sfImg1;
        this.imageUrl2 = this.formData.sfImg2;
        this.imageUrl3 = this.formData.sfImg3;
        this.imageUrl4 = this.formData.sfImg4;
        this.imageUrl5 = this.formData.sfImg5;
        this.formData.reserve5 = this.formData.monthRent*this.formData.depositType+this.formData.depositMoney*this.formData.paymentType;
      },
      handleAvatarSuccess1(res) {
        this.imageUrl1 = res;
        this.formData.sfImg1=res;
      },
      handleAvatarSuccess2(res) {
        this.imageUrl2 = res;
        this.formData.sfImg2=res;
      },
      handleAvatarSuccess3(res) {
        this.imageUrl3 = res;
        this.formData.sfImg3=res;
      },
      handleAvatarSuccess4(res) {
        this.imageUrl4 = res;
        this.formData.sfImg4=res;
      },
      handleAvatarSuccess5(res) {
        this.imageUrl5 = res;
        this.formData.sfImg5=res;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
